<template>
    <el-drawer v-model="state.draw.showDrawer" direction="rtl" size="60%" :before-close="closeDraw">
        <template #header>
            <h4>考勤组详情</h4>
        </template>
        <template #default>
            <div class="device-info">
                <el-row><span class="device-label">考勤组名称</span><span>{{ state.ruleRow.name }}</span></el-row>
            </div>

            <div style="padding: 20px;">
                <tabs-employee ref="tabsRefEmployee"></tabs-employee>
            </div>

        </template>
    </el-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import TabsEmployee from './tabs/drawTabsEmployee.vue'

// 定义变量类型
const tabsRefEmployee = ref()

const state = reactive({
    draw: {
        showDrawer: false,
        activeName: 'employeeTabs',
    },
    ruleRow: {
        code: '',
        name: '',
    },

})
// 打开dialog
const openDraw = (row: { code: string; name: string }) => {
    state.draw.showDrawer = true
    state.draw.activeName = 'employeeTabs'
    state.ruleRow = row
    nextTick(() => {
        tabsRefEmployee.value.initTabs(row)
    })
}
// tab切换
const changeTabs = (tabsName: string) => {
    switch (tabsName) {
        case 'employeeTabs':
            tabsRefEmployee.value.initTabs(state.ruleRow)
    }
}

const closeDraw = () => {
    state.draw.showDrawer = false
    state.draw.activeName = 'employeeTabs'
}

// 暴露变量
defineExpose({
    openDraw
})
</script>

<style lang="scss" scoped>
h4 {
    font-weight: 400;
    font-size: 15px;
    color: #000;
}

.device-info {
    width: 96%;
    padding: 20px;
    padding-right: 20%;
    margin: 10px auto;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;

    .el-row {
        display: flex;
        flex-direction: column;

        .device-label {
            color: #999;
            font-size: 14px;
        }
    }
}

.demo-tabs {
    width: 96%;
    margin: auto;
}

.search-group {
    padding-bottom: 15px;
    display: flex;
    min-width: 700px;

    span {
        margin-right: 10px;
    }

    .btns_group {
        margin-right: 0;
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 0 40px 0 15px;
}
</style>